<!-- 
  vex-table 组件封装
    docs: https://vxetable.cn/v3/#/table/grid/fullEdit
 -->
<template>
  <vxe-table border :data="tableData">
    <vxe-column type="seq" width="60"></vxe-column>
    <!-- <vxe-column field="name" title="文本筛选" :filters="[{ data: null }]" :filter-render="{ name: 'FilterInput' }"></vxe-column>
    <vxe-column field="role" title="实现条件的筛选" :filters="[{ data: { type: 'has', name: '' } }]"
      :filter-render="{ name: 'FilterComplex' }"></vxe-column>
    <vxe-column field="age" title="实现内容的筛选" :filters="[{ data: { vals: [], sVal: '' } }]"
      :filter-render="{ name: 'FilterContent' }"></vxe-column>
    <vxe-column field="address" title="实现复杂的筛选" sortable
      :filters="[{ data: { vals: [], sVal: '', fMenu: '', f1Type: '', f1Val: '', fMode: 'and', f2Type: '', f2Val: '' } }]"
      :filter-render="{ name: 'FilterExtend' }"></vxe-column> -->
  </vxe-table>
</template>

<script>
import 'vxe-table/lib/style.css'

export default {
  data() {
    return {
      tableData: [
        { id: 10001, name: 'Test1', role: 'Develop', sex: 'Man', age: '28', address: 'Shenzhen' },
        { id: 10002, name: 'Test2', role: 'Test', sex: 'Women', age: '22', address: 'Guangzhou' },
        { id: 10003, name: 'Test3', role: 'PM', sex: 'Man', age: '32', address: 'Shanghai' },
        { id: 10004, name: 'Test4', role: 'Designer', sex: 'Women', age: '23', address: 'Shenzhen' },
        { id: 10005, name: 'Test5', role: 'Develop', sex: 'Women', age: '30', address: 'Shanghai' },
        { id: 10006, name: 'Test6', role: 'Designer', sex: 'Women', age: '21', address: 'Shenzhen' },
        { id: 10007, name: 'Test7', role: 'Test', sex: 'Man', age: '29', address: 'Shenzhen' },
        { id: 10008, name: 'Test8', role: 'Develop', sex: 'Man', age: '35', address: 'Shenzhen' }
      ]
    }
  },
  computed: {

  },
  created() {

  },
  methods: {

  }
}
</script>

<style lang="less" scoped>
:deep(.vxe-table) {}

/deep/ .vxe-table--header-wrapper {
  background: transparent !important;
}

/deep/ .vxe-table--body {
  background: transparent !important;
}

:deep(.vxe-table--body-wrapper) {
  &::-webkit-scrollbar {
    width: 12px;
  }

  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    box-shadow: inset006pxrgba(0, 0, 0, 0.3);
    border-radius: 10px;
  }

  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.1);
    box-shadow: inset006pxrgba(0, 0, 0, 0.5);
  }

  &::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(0, 0, 0, .06);
  }
}
</style>
